<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- <input type="text" v-focus /> -->
      <div v-abc:style.30.red="900">hello</div>
      <div v-abc:style.50.green="100">world</div>
    </div>

    <script src="../../Vue.js"></script>
    <script>
      // 注册一个全局自定义指令 `v-focus`
      // Vue.directive("focus", {
      //   // 当被绑定的元素插入到 DOM 中时……
      //   inserted: function (el) {
      //     // 聚焦元素
      //     el.focus();
      //   },
      // });

      new Vue({
        el: "#app",
        data: {},
        directives: {
          // abc: {
          //   bind(el, binding, vnode, oldVnode) {},
          //   inserted(el, binding, vnode, oldVnode) {},
          //   update(el, binding, vnode, oldVnode) {},
          //   componentUpdated(el, binding, vnode, oldVnode) {},
          //   unbind(el, binding, vnode, oldVnode) {},
          // },

          // bind 和 update 时触发相同行为，而不关心其它的钩子
          abc(el, binding, vnode, oldVnode) {
            // console.log(el); // el表示挂载的元素
            console.log(binding); // binding表示一个很多参数组成的对象
            const { arg, modifiers, value } = binding;
            const [size, color] = Object.keys(modifiers); // {30:true,"red": true} => [30, "red"]
            el[arg].fontSize = size + "px";
            el[arg].color = color;
            el[arg].fontWeight = value;
          },
        },
      });

      /*
        bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

        inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

        update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

        componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

        unbind：只调用一次，指令与元素解绑时调用。
      */
    </script>
  </body>
</html>
